<html>
    <head>
        <meta charset="UTF-8">
        <title>表单完整验证</title>
        
        
    </head>
    <body >
            <script type="text/javascript">
                /*
                    验证用户名不为空
                    用户名长度6到14
                    密码不能为空
                    密码至少6位
                    密码和确认密码一致。
                */
                String.prototype.trim = function(){
                    return this.replace(/^\s+/,"").replace(/\s+$/,"");
                }
                function checkName(username){
                    username = username.trim();
                    var nameError = document.getElementById("nameError");
                    if(username == ""){
                        nameError.innerHTML="<font color='red'>username不为空</font>";
                    }else if(username.length < 6|| username.length>14){
                        nameError.innerHTML="<font color='red'>user name length not > 14or < 6</font>";
                    }else{
                        nameError.innerHTML="";
                    }
        
        
                }
                function clearNameError(){
                    var nameError = document.getElementById("nameError");
                    nameError.innerHTML = "";
        
                }
                function checkUserPswd(pswd){
                     var ok = false;
                    var pwdError =document.getElementById("pswdError");
                    if(pswd ==""){
                        pwdError.innerHTML = "<font color='red'>password不为空</font>";
                        ok = false;

                    }else if(pswd.length<6){
                        pswdError.innerHTML = "<font color='red'>password not < 6 </font>";
                        ok = false;
                    }else{
                        pswdError.innerHTML="";
                        ok = true;
                    }
                    return ok;
                }
                function clearPswdError(){
                    var pswdError = document.getElementById("pswdError");
                    pswdError.innerHTML="";

                }
                function  isSame(){
                    var ok = false;
                    //获取密码
                     var userpswd =document.getElementById("userpswd").value;

                    //获取确认密码
                    var confirmpswd = document.getElementById("confirmpswd").value;

                    //比较
                    var confirmPswdError = document.getElementById("confirmPswdError");
                    if(userpswd != confirmpswd){
                        confirmPswdError.innerHTML = "<font color='red'>password is not same</font>";
                        ok = false;
                    }else{
                        confirmPswdError.innerHTML = "";
                        ok = true;
                    }
                    return ok;
                }
                function cleanSameError(){
                    var confirmpswd = document.getElementById("confirmpswd").value;
                    confirmPswdError.innerHTML = "";

                }
                function checkAll(){
                    var username = document.getElementById("username").value;
                    var userpswd = document.getElementById("userpswd").value;
                    if(checkName(username) && checkUserPswd(userpswd) && isSame()){
                        document.forms["userForm"].action = "";
                        document.forms["userForm"].method = "get";
                        document.forms["userForm"].submit();
                    }

                }
                
                </script>

        <from>
            username
                <input type="text" name="username" id="username" onblur="checkName(this.value)" onfocus="clearNameError();"/>
                <span id="nameError"></span>
                <br>
            keyword
                <input type="password" name="userpswd" id="userpswd" onblur="checkUserPswd(this.value)" onfocus="clearPswdError();"/>
                <span id="pswdError"></span>
                <br>
            sure key
                <input type="password" name="confirmpswd" id="confirmpswd" onblur="isSame()" onfocus="cleanSameError();"/>
                <span id="confirmPswdError"></span>
                
                <br>
            <input type="button" value="注册" onclick="checkAll();"/>
        </from>
    </body>
</html>